const app = '/lesson-admin';


onload = () => {
    //发送请求，获取今日新增用户量
    getOvervier('/api/v1/user/today-count', 'userTodayCount');
    //发送请求，获取用户总数
    getOvervier('/api/v1/user/total-count', 'userTotalCount');
    //发送请求，获取今日新增订单量
    getOvervier('/api/v1/order/today-count', 'orderTodayCount');
    //发送请求，获取订单总数
    getOvervier('/api/v1/order/total-count', 'orderTotalCount');
    // 发送请求，获取视频评分统计数据
    ajax({
        'url': app + '/api/v1/video/star-count',
        'success': res => {
            let board02 = document.querySelector('#board02');
            renderVideoStarCount(board02, res.data);
        }
    });
    // 发送请求，获取用户年龄统计数据
    ajax({
        'url': app + '/api/v1/user/gender-count',
        'success': res => {
            let board01 = document.querySelector('#board01');
            renderUserGenderCount(board01, res.data);
        }
    });
    //获取日增用户数量统计
    ajax({
        'url': app + '/api/v1/user/growth-count',
        'success': res => {
            let board03 = document.querySelector('#board03');
            renderUserGrowthCount(board03, res.data);
        }
    });
    //
    ajax({
        'url':app+'/api/v1/order/growth-count',
        'success':res=>{
            let board04=document.querySelector('#board04');
            renderOrderGrowthCount(board04,res.data);
        }
    });
}

function getOvervier(url, elementId) {
    ajax({
        'url': app + url,
        'success': res => {
            if (res.code > 0) {
                let element = document.querySelector('#' + elementId);
                element.innerHTML = res.data;
            } else alert(res.message);
        }
    });
}
/*用户年龄统计数据出图*/
function renderUserGenderCount(board, data) {
    // 图形设置
    echarts.init(board).setOption({
        // 标题
        title: {text: ''},
        // 系列
        series: [{
            name: '性别 - 用户数', // 系列名称
            type: 'pie', // 系列类型
            data: data, // 系列数据
            radius: '50%', // 饼图半径
            // 文字
            label: {
                show: true, // 显示文字
                formatter: arg => `${arg.name === '0' ? '女性' : arg.name === '1' ? '男性' : '保密'} - ${arg.value}人\n占比 ${arg.percent}%` // 格式化
            }
        }],
        // 鼠标经过时显示提示信息
        tooltip: {}
    });
}
/*视频评分统计数据出图*/
function renderVideoStarCount(board, data) {
    // 准备X轴和Y轴数据
    let xData = [], yData = [];
    for (let i in data) {
        xData.push(data[i]['name']);
        yData.push(data[i]['value']);
    }
    // 图形设置
    echarts.init(board).setOption({
        // 标题
        title: {text: ''},
        // 配置X轴
        xAxis: {
            name: '评分', // 名称，可选
            nameLocation: 'end', // 名称位置，可选
            data: xData, // 数据数组
            // 轴线
            axisLine: {show: true, lineStyle: {color: '#48b', width: 2}},
            // 文本
            axisLabel: {show: true, formatter: arg => arg + '星'}
        },
        // 配置Y轴
        yAxis: {
            name: '数量', // 名称，可选
            nameLocation: 'end', // 名称位置，可选
            min: 0, // 最小值
            scale: true, // 自适应最大最小值
            interval: 1, // 分割刻度（步长）
            // 轴线
            axisLine: {show: true, lineStyle: {color: '#48b', width: 2}},
            // 文本
            axisLabel: {show: true}
        },
        // 配置系列（即图形）
        series: [{
            name: '评分 - 视频数', // 系列名称
            type: 'bar', // 系列类型
            data: yData, // 系列数据
            // 标记点
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'}, // 自动标记最大值
                    {type: 'min', name: '最小值'}, // 自动标记最小值
                ]
            },
            // 标记线
            markLine: {
                data: [{type: 'average', name: '平均值'}] // 标记平均值线
            },
            // 系列文字
            label: {show: true}
        }],
        // 鼠标经过时显示提示信息
        tooltip: {},
        // 柱子宽度
        barWidth: '50%'
    });
}
/*日增用户统计数据出图*/
function renderUserGrowthCount(board, data) {

    // 准备X轴和Y轴数据
    let xData = [], yData = [];
    for (let i in data) {
        xData.push(data[i]['name']);
        yData.push(data[i]['value']);
    }
    // 图形设置
    echarts.init(board).setOption({
        // 标题
        title: {text: ''},
        // 配置X轴
        xAxis: {
            name: '日期', // 名称，可选
            nameLocation: 'end', // 名称位置，可选
            data: xData // 数据数组
        },
        // 配置Y轴
        yAxis: {
            name: '数量', // 名称，可选
            nameLocation: 'end', // 名称位置，可选
            min: 0, // 最小值
            scale: true, // 自适应最大最小值
            interval: 1, // 分割刻度（步长）
        },
        // 配置系列（即图形）
        series: {
            name: '日期 - 用户数', // 系列名称
            type: 'line', // 系类类型
            data: yData, // 系列数据
            // 标记线
            markLine: {
                data: [
                    {type: 'average', name: '平均值'} // 标记平均值线
                ]
            },
            // 系列文字
            label: {show: true}
        },
        // 鼠标经过时显示提示信息
        tooltip: {},
        // 线条颜色
        lineStyle: {color: 'green'}
    });
}
/*日增订单统计数据出图*/
function renderOrderGrowthCount(board, data) {

    // 准备X轴和Y轴数据
    let xData = [], yData = [];

    for (let i in data) {
        xData.push(data[i]['name']);
        yData.push(data[i]['value']);
    }

    // 图形设置
    echarts.init(board).setOption({
        // 标题
        title: {text: ''},
        // 配置X轴
        xAxis: {
            name: '日期', // 名称，可选
            nameLocation: 'end', // 名称位置，可选
            data: xData // 数据数组
        },
        // 配置Y轴
        yAxis: {
            name: '数量', // 名称，可选
            nameLocation: 'end', // 名称位置，可选
            min: 0, // 最小值
            scale: true, // 自适应最大最小值
            interval: 1, // 分割刻度（步长）
        },
        // 配置系列（即图形）
        series: {
            name: '日期 - 订单数', // 系列名称
            type: 'line', // 系类类型
            data: yData, // 系列数据
            // 标记线
            markLine: {
                data: [
                    {type: 'average', name: '平均值'} // 标记平均值线
                ]
            },
            // 系列文字
            label: {show: true}
        },
        // 鼠标经过时显示提示信息
        tooltip: {},
        // 线条颜色
        lineStyle: {color: 'green'}
    });
}